<template>
	<div class="swiper-container ">
			<div class="swiper-wrapper">
				<div class="swiper-slide b_nav">
					
					<router-link v-for='(item,index) in datas' :key="index" :to="{name:'classify', params:{id:item.title,j:item.longitude,w:item.latitude}}" class="img">
						<img :src="'https://fuss10.elemecdn.com' + item.image_url" alt="">
						<p>{{item.title}}</p>
					</router-link>
					
				</div>
				<div class="swiper-slide b_nav">
					
					<router-link v-for='(item,index) in datas1' :key="index + 8" :to="{name:'classify', params:{id:item.title,j:item.longitude,w:item.latitude}}" class="img">
						<img :src="'https://fuss10.elemecdn.com' + item.image_url" alt="">
						<p>{{item.title}}</p>
					</router-link>
					
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
		</div>
</template>

<script>
	import '../../node_modules/swiper/css/swiper.min.css'
	import Swiper from 'swiper'
	
	export default{
		name:'b_nav',
		data:function(){
			return{
				datas:[],
				datas1:[],
				msg:''
			}
		},
		created(){
			this.msg =this.$route.query;
			// window.console.log(this.msg)
			let obj = this;
			this.$axios({
				url:'https://elm.cangdu.org/v2/index_entry',
				method:'get',
			}).then(function(res){
				for (let i = 0; i < 8; i++) {
							obj.datas.push(res.data[i])
						}
				for (let i = 8; i < 16; i++) {
							obj.datas1.push(res.data[i])
						}
				});
		},
		mounted() {
					new Swiper('.swiper-container', {
						// loop: true, 
						// // 循环模式选项
						// autoplay: true,
						// 如果需要分页器
						pagination: {
							el: '.swiper-pagination',
						},
					});
				},
	}
</script>

<style scoped>
	.b_nav{
		margin-top: 39px;
		width: 100%;
		/* height: 186px; */
		background: #FFFFFF;
		padding-bottom: 20px;
		overflow: hidden;
	}
	.img{
		width: 25%;
		float: left;
		text-align: center;
		overflow: hidden;
	}
	.img img{
		width: 42px;
		margin-top: 4px;
	}
	.img p{
		font-size: 12px;
		color: #666666;
		/* margin-top: 0; */
		margin-bottom: 0;
	}
	
</style>
